<template>
	<view class="VotingInfo">
		<view :style="{'height': `${statusBarHeight}px`, 'background-color': '#060143'}"></view>
		<uni-nav-bar backgroundColor="#060143;" color="#FFF" :title="$t('language.live5')" @clickLeft="goBack" left-icon="left"
			:border="false" />
		<view class="logo">
			<image class="logo-ic" src="@/static/logo.png" alt="" />
			<view class="lang-wrap" @click="changeLanguage">
				<image src="../../static/100.png" mode=""></image>
				<text>{{$t('locale.lang')}}</text>
			</view>
		</view>
		<view class="VotingInfoHeader">
			<view class="cue-text">
				{{$t('language.live5')}}
			</view>
			<view class="title">
				{{voteTitle}}
			</view>
			<view class="time">
				<uni-dateformat format="yyyy-MM-dd" :date="add_time * 1000"></uni-dateformat>
			</view>
		</view>

		<view class="chooseVoting">
			<radio-group v-model="tabonline">
				<view class="itemVoting" :class="{'active': answer == item.a}" v-for="(item,index) in VotingList" :key="index" @click="choose(index)">
					<radio color="#b88d5b" :disabled="onTab == 2" icon-size="0.14rem" :checked="answer == item.a"
						:name="index">{{item.t}}</radio>
				</view>
			</radio-group>
			<view class="Queren" @click="submitBtn()" v-if="onTab == 1">
				{{$t('language.live4')}}
			</view>
		</view>
		<!-- <view class="onTab2" v-if="onTab == 2"></view> -->
	</view>
</template>
<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app';
	import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
	import uniDateformat from "@/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue";
	import {
		vote_info,
		vote_save
	} from "@/api/user";
	let timer = null
	export default {
		name: 'VotingInfo',
		components: {
			uniIcons,
			uniDateformat
		},
		data() {
			return {
				baseUrl: HTTP_REQUEST_URL,
				statusBarHeight: 44,
				onTab: '',
				answer: '',
				radio: '1',
				tabonline: null,
				event_id: '',
				vote_id: '',
				voteTitle: '',
				add_time: '',
				VotingList: []
			}
		},
		onLoad(o) {
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
			if(o.scene) {
				let scene = o.scene.split('_')
				this.event_id = scene[0]
				this.vote_id = scene[1]
			} else {
				let event_id = o.event_id;
				let vote_id = o.vote_id;
				let onTab = o.type;
				this.event_id = event_id;
				this.vote_id = vote_id;
				this.onTab = onTab;
			}
			this.getVotingListInfo();
		},
		created() {},
		methods: {
			async getVotingListInfo() {
				const response = await vote_info({
					event_id: this.event_id,
					vote_id: this.vote_id
				})
				if (response.code == 200) {
					this.VotingList = response.data.content
					let _answer = response.data.answer
					this.answer = _answer
					this.onTab = _answer == "" ? 1 : 2
					this.voteTitle = response.data.title
					this.add_time = response.data.add_time
					let newVotingList = this.VotingList
					for (let i = 0; i < newVotingList.length; i++) {
						if (response.data.answer === newVotingList[i].a) {
							this.tabonline = i
						}
					}
				} else {
					console.log(response.msg);
				}

			},
			choose(index) {
				if(this.onTab == 2) return
				this.answer = this.VotingList[index].a
				this.tabonline = index
			},
			submitBtn() {
				const t = this
				if (t.tabonline == null) {
					let messagetips = t.$i18n.locale == 'zh' ? '请选择答案' : 'Please select the answer'
					uni.showToast({
						title: messagetips,
						icon: 'none'
					})
					return false
				}
				vote_save({
					event_id: t.event_id,
					vote_id: t.vote_id,
					options: t.VotingList[t.tabonline].a,
					ans: t.VotingList[t.tabonline].t
				}).then(
					res => {
						if (res.code == 200) {
							console.log(res)
							t.onTab = 2;
							let messagetips = t.$i18n.locale == 'zh' ? '投票成功' : 'Vote successfully'
							uni.showToast({
								title: messagetips,
								icon: 'success',
								success() {
									uni.redirectTo({
										url: '/pages/LiveInteraction/VotingList?evenId=' + t.event_id
									})
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					err => {
						console.log(err)
					}
				);
			},
			goBack() {
				uni.redirectTo({
					url: '/pages/LiveInteraction/VotingList?evenId=' + this.event_id
				})
				// uni.navigateBack()
			},
			changeLanguage() {
				if (this.$i18n.locale == 'zh') {
					this.$i18n.locale = 'en';
					uni.setStorageSync('locale', 'en')
				} else {
					this.$i18n.locale = 'zh';
					uni.setStorageSync('locale', 'zh')
				}
			}
		}
	}
</script>
<style lang="scss">

	.logo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20upx 30upx;
		background-color: #060143;

		.logo-ic {
			width: 78upx;
			height: 64upx;
		}

		.lang-wrap {
			display: flex;
			align-items: center;
			color: #fff;
			font-size: 24upx;

			image {
				width: 30upx;
				height: 30upx;
				margin-right: 12upx;
			}
		}
	}

	page {
		background-color: #050033;
	}

	.VotingInfo {
		width: 100%;
		min-height: 100vh;
		// background: #f0eeed;
		box-sizing: border-box;
	}

	.headerChangeLanguage {
		height: 100upx;
		background: #fff;
		padding: 0 30upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2upx 4upx #ccc;
		width: 100%;
		box-sizing: border-box;
	}

	.logo image {
		width: 178upx;
		height: 30upx;
	}


	.language {
		flex-shrink: 0;
	}

	.langeageZh {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/EN-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.langeageEn {
		height: 30upx;
		width: 86upx;
		background: url($image-base-url + '/static/img/CH-17.png') no-repeat;
		background-size: 86upx 30upx;
	}

	.VotingInfoHeader {
		padding: 30upx;
	}

	.cue-text {
		display: inline-block;
		width: auto;
		height: 44upx;
		line-height: 44upx;
		text-align: center;
		padding: 0 24upx;
		border-radius: 60upx 60upx 60upx 0;
		background-color: #d3a86a;
		color: #fff;
		font-size: 24upx;
	}

	.title {
		// min-height: 92upx;
		padding-top: 20upx;
		padding-bottom: 10upx;
		color: #fff;
		font-size: 32upx;
		// border-bottom: 2upx solid #ebebeb;
	}

	.time {
		color: #959596;
		font-size: 24upx;
		display: flex;
	}

	.chooseVoting {
		padding: 30upx;
	}

	.itemVoting {
		width: 100%;
		height: 110upx;
		background: #fff;
		border-radius: 8upx;
		position: relative;
		padding-left: 30upx;
		box-sizing: border-box;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 30upx;

		&.active {
			background: #1f1b56;
			color: #fff;
		}
	}

	.Queren {
		height: 90upx;
		background: #b88d5b;
		color: #fff;
		line-height: 90upx;
		text-align: center;
		border-radius: 90upx;
		margin-top: 100upx;
	}

	.onTab2 {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		z-index: 999;
	}
</style>